<template>
<div id="app">
<!--  动态面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbList.path">
  {{breadCrumbItem.meta.title}}
    </el-breadcrumb-item>
  </el-breadcrumb>
  <br/>
  <!--卡片视图-->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-input placeholder="请输入要查找的用户" v-model="queryInfo.query"  clearable @clear="getUserList">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
      </el-input>
      </el-col>
      <el-tooltip :enterable="false" effect="dark" content="添加用户" placement="top">
        <el-button type="primary" icon="el-icon-plus" round @click="dialogVisible = true">添加用户</el-button>
      </el-tooltip>

    </el-row>

    <el-table
        :data="userList"
        stripe
        style="width: 100%"
        border>
      <el-table-column  type="index" label="#" ></el-table-column>
      <el-table-column prop="username" label="名称" ></el-table-column>
      <el-table-column prop="email" label="邮箱" ></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="role_name" label="角色"></el-table-column>
      <el-table-column prop="mg_state" label="状态"  >
        <template v-slot="scope">

          <el-switch
              v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column  label="操作" width="173px">
        <template v-slot="scope" >
            <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeUserById(scope.row.id)"></el-button>
          <el-tooltip :enterable="false" effect="dark" content="分配角色" placement="top">
            <el-button size="mini" type="warning" icon="el-icon-setting"></el-button>
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
  <el-dialog
      @close="addDialogClosed"
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
      </el-form-item>

      </el-form>
    <span slot="footer" >
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
  </el-dialog>
<!--  //修改用户dialog-->
  <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
      >
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" >
      <el-form-item label="用户名" >
        <el-input v-model="editForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="editForm.mobile" ></el-input>
      </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "Users",
  data(){
    return{
      editForm:{},
      editFormRules:{
        email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },

        ],
        mobile:[
          { required: true, message: '请输入手机', trigger: 'blur' },

        ]
      },
      editDialogVisible:false,
      addForm:{
        username:'',
        password: '',
        email:'',
        mobile:''
      },
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
        ]
      },

      dialogVisible: false,
      userList:[],
      queryInfo:{
      query:'',
      pagenum:1,
      pagesize:10
      },
      total:0,
    }
  },
  methods:{
    async getUserList(){
    const {data:res}= await this.$http.get('users',{params:this.queryInfo})
      if(res.meta.status!==200) return this.$message.error('获取用户列表失败')
      this.userList=res.data.users
      this.total=res.data.total
      this.$notify({
        title: '获取用户列表成功',
        type: 'success',
        offset: 800
      })
    },
    handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize
      this.getUserList()
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage
      this.getUserList()
    },
     async userStateChanged(userinfo){
     const{data:res}=await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
     if(res.meta.status!==200) {
       userinfo.mg_state != userinfo.mg_state
       return this.$message.error('修改用户状态失败')
     }
       this.$notify({
         title: '修改用户状态成功',
         type: 'success',
         offset: 800
       })
    },
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },
    addUser(){
      this.$refs.addFormRef.validate(async valid=>{
       if(!valid) return
        const {data: res} =await this.$http.post('users', this.addForm)
        if (res.meta.status !== 201) {
         return  this.$notify({
            title: '注意！添加用户失败',
            type: 'warning',
            offset: 800
          })
        }
        this.$notify({
          title: '添加用户成功',
          type: 'success',
          offset: 800
        })
        this.dialogVisible=false
        this.getUserList()
      })
    },
    async showEditDialog(id){
     const{data:res}= await this.$http.get('users/'+id)
      if(res.meta.status!==200)
      return this.$message.error('查询失败')
      this.editForm=res.data
      this.editDialogVisible=true
    },
    editDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    editUserInfo(){
      this.$refs.editFormRef.validate( async valid=>{
        if(!valid) return
        const{data:res}=await this.$http.put('users/'+this.editForm.id,
            {email:this.editForm.email,
              mobile:this.editForm.mobile
        })
        if(res.meta.status!==200) return this.$message.error('更新失败')
        this.editDialogVisible=false
        this.getUserList()
        this.$message.success('修改成功')

      })
    },
     async removeUserById(id){
        const Tip=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {

          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
       if(Tip!=='confirm'){
         return  this.$message.info('已取消删除')
       }
        const {data:res}= await this.$http.delete('users/'+id)
       if(res.meta.status!==200){
          console.log(res.meta.status)
          this.$message.error('删除失败')
       }else {
         this.$message.success('删除成功')
         this.getUserList()
       }
    }

  },
  created() {
   this.getUserList();
  },
  computed:{
    //路由信息列表
    breadCrumbList(){
      console.log(this.$route)
      return  this.$route.matched
    },
  }
}
</script>

<style lang="less" scoped>
.el-card {
  box-shadow: 4px 4px 10px #cecece !important;
}
.el-table{
  margin-top: 20px;
}
.el-pagination{
  margin-top: 20px;
  text-align: center;
}
  #app{
    opacity: 0;
    animation: bottomBtn 0.5s linear 100ms forwards;
  }
  @keyframes bottomBtn {
    to{
      opacity: 1 ;
    }
    from{
      opacity: 0 ;
    }
  }
</style>
